import 'package:flutter/material.dart';

/// `_NavItem` 是一个私有数据模型类，用于表示导航栏中的一个项目。
///
/// 它封装了每个导航按钮所需的图标（`icon`）和标签（`label`）。
/// 使用这种模型类可以使导航项的管理更加清晰和可维护。

class _NavItem {
  final IconData icon;
  final String label;

  const _NavItem(this.icon, this.label);
}

/// `LeftNavBar` 是位于 POS 屏幕左侧的主导航栏。
///
/// 它显示了一系列导航按钮，允许用户在应用的不同部分之间切换，
/// 例如“首页”、“点单”和“设置”。按钮是根据 `_NavItem` 模型列表动态生成的，
/// 这使得添加、删除或修改导航项变得非常容易。
class LeftNavBar extends StatelessWidget {
  /// `LeftNavBar` 的构造函数。
  const LeftNavBar({super.key});

  // 定义了导航栏中主要的导航项目。
  // `static const` 确保这个列表在编译时被创建并且不能被修改，提高了性能。
  static const List<_NavItem> _navItems = [
    _NavItem(Icons.home, '首页'),
    _NavItem(Icons.local_cafe, '点单'), // Changed from point_of_sale
    _NavItem(Icons.receipt_long, '接单'), // Changed from receipt
    _NavItem(Icons.notifications, '通知'),
    _NavItem(Icons.bar_chart, '报表'),
    _NavItem(Icons.settings, '设置'),
    _NavItem(Icons.campaign, '叫号'), // Changed from vpn_key
    _NavItem(Icons.verified_user, '核销'), // Changed from check_circle
    _NavItem(Icons.more_horiz, '更多'),
  ];

  // 定义了位于导航栏底部的操作项目，如“锁屏”和“退出”。
  static const List<_NavItem> _bottomNavItems = [
    _NavItem(Icons.lock, '锁屏'),
    _NavItem(Icons.exit_to_app, '退出'),
  ];

  @override
  Widget build(BuildContext context) {
    // `Container` 用作导航栏的根容器，设置了固定的宽度和背景颜色。
    return Container(
      width: 80,
      color: const Color(0xFF006241), // Starbucks green
      // `Column` 用于垂直排列导航栏的所有元素。
      child: Column(
        children: [
          const SizedBox(height: 20),
          // Logo 占位符。
          const Icon(Icons.coffee, color: Colors.white, size: 40),
          const SizedBox(height: 20),
          // `Expanded` 使得中间的导航按钮列表可以填充所有可用的垂直空间。
          Expanded(
            // `SingleChildScrollView` 确保当导航项过多时，列表可以滚动。
            child: SingleChildScrollView(
              child: Column(
                // 使用 `map` 从 `_navItems` 列表动态创建 `_NavButton` 列表。
                // `isSelected` 属性用于高亮显示当前选中的项目（此处硬编码为“首页”）。
                children: _navItems
                    .map((item) => _NavButton(
                        icon: item.icon,
                        label: item.label,
                        isSelected: item.label == '首页'))
                    .toList(),
              ),
            ),
          ),
          // 使用展开操作符 `...` 将底部的导航按钮添加到 `Column` 中。
          ..._bottomNavItems
              .map((item) => _NavButton(icon: item.icon, label: item.label)),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}

/// `_NavButton` 是一个私有的、可重用的 Widget，用于显示单个导航按钮。
///
/// 它封装了按钮的视觉表现和布局，包括图标、标签以及选中状态下的样式。
class _NavButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;

  const _NavButton(
      {required this.icon, required this.label, this.isSelected = false});

  @override
  Widget build(BuildContext context) {
    // `Container` 定义了按钮的整体外观，包括内边距、外边距和装饰（如背景色和圆角）。
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 12),
      margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
      decoration: BoxDecoration(
        // 根据 `isSelected` 状态动态改变背景色，以提供视觉反馈。
        color: isSelected ? Colors.black.withOpacity(0.2) : Colors.transparent,
        borderRadius: BorderRadius.circular(8),
      ),
      // `Column` 用于垂直排列按钮内的图标和文本。
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: Colors.white, size: 28),
          const SizedBox(height: 6),
          Text(
            label,
            style: const TextStyle(color: Colors.white, fontSize: 12),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}